<!DOCTYPE HTML>
<html><head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Edit Crawling Rules</title>
    <!-- jsoneditor -->
    <link rel="stylesheet" type="text/css" href="/javascripts/jsoneditor/jsoneditor.css">
    <script type="text/javascript" src="/javascripts/jsoneditor/jsoneditor.js"></script>
    <!-- ace code editor -->
    <script type="text/javascript" src="/javascripts/jsoneditor/lib/ace/ace.js"></script>
    <script type="text/javascript" src="/javascripts/jsoneditor/lib/ace/mode-json.js"></script>
    <script type="text/javascript" src="/javascripts/jsoneditor/lib/ace/theme-textmate.js"></script>
    <script type="text/javascript" src="/javascripts/jsoneditor/lib/ace/theme-jsoneditor.js"></script>
    <!-- json lint -->
    <script type="text/javascript" src="/javascripts/jsoneditor/lib/jsonlint/jsonlint.js"></script>

    <style type="text/css">
        body {
            font: 10.5pt arial;
            color: #4d4d4d;
            line-height: 150%;
            width: 500px;
        }

        code {
            background-color: #f5f5f5;
        }

        #jsoneditor {
            width: 1000px;
            height: 500px;
        }
    </style>

</head>

<body>

<h1>Edit <%= rule.domain %></h1>

<hr><a href="/rule">Return</a>
<p></p>
<form method="post" action="/rule/upsert" id="form"  onsubmit="return checkform()">
    <textarea id="jsondata" name="jsondata" style="display:none"><%=JSON.stringify(rule)%></textarea>
    <div id="jsoneditor"></div>
    <p>
    <input type="submit" name="submit" id="submit" value="Submit"/>
    </p>
</form>
<script type="text/javascript" >
    var container = document.getElementById('jsoneditor');
    var datanode = document.getElementById('jsondata');

    var options = {
        mode: 'tree',
        modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
        error: function (err) {
            alert(err.toString());
        }
    };

    var editor = new jsoneditor.JSONEditor(container, options,JSON.parse(datanode.value));

    var checkform = function(){
        try{
            var jsonvalue = JSON.stringify(editor.get());
            datanode.value = jsonvalue;
        }catch(e){
            return false;
        }
        return true;
    }
</script>
</body></html>